<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>

    <style>
        /*去掉浏览器自带的属性，防止撑大盒子属性*/
        * {
            /*外边距*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            /*上下外边距为 20px 左右外边距自动跟随上下外边距*/
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: rgb(50, 50, 50);
            margin: 20px auto;
        }

        .row {
            /*开启弹性布局   */
            display: flex;
            height: 50px;
            /*居中，水平 + 垂直*/
            justify-content: center;
            align-items: center;
        }

        .row span {
            width: 80px;
        }

        .row input {
            height: 40px;
            width: 200px;
        }

        .row button {
            width: 280px;
            height: 40px;
            color: white;
            background-color: orange;
            border-radius: 10px;
            /*去掉边框*/
            border-width: 1px;
        }

        /*点击按钮时有个响应信息*/
        .row button:active {
            background-color: darkgrey;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>记录爱的点点滴滴!</p>
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说什么:</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">确定</button>
        </div>
        <div class="row">
            <button id="revese">撤销</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        //将对话框中的直获取到在下面插入一个新的div标签
        let containes = document.querySelector('.container');//用于添加子模块
        let inputs = document.querySelectorAll('input');//获取所有的input标签
        let buttons = document.querySelector('#submit');
        buttons.onclick = function () {
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if (from == '' || to == '' || msg == '') {
                return;
            }
            let newdiv = document.createElement('div');
            newdiv.className = 'row message';
            newdiv.innerHTML = from + '对' + to + '说: ' + msg;
            containes.appendChild(newdiv);
            //并清空之前的值
            for (let input of inputs) {
                input.value = '';
            }

            let body = {
                "from": from,
                "to": to,
                "message": msg
            }
            console.log(JSON.stringify(body));
            //通过ajax的post的方法，发送数据到后端
            $.ajax({
                type: 'post',
                url: 'message',
                //需要json格式的字符串
                data: JSON.stringify(body),
                contentType: 'application/json;charset=utf8',
                success: function (data) {
                    console.log("success!")
                }
            });
        }

        let reveses = document.querySelector('#revese');
        reveses.onclick = function () {
            //获取最后一个元素，进行删除子控件
            let messages = document.querySelectorAll('.message');
            if (messages.length == 0 || messages == null) {
                return;
            }
            containes.removeChild(messages[messages.length - 1]);
        }

        //在页面加载时，通过get方法从后端获取数据，构建成div添加到container后面子模块
        $.ajax({
            type: 'get',
            url: 'message',
            success: function (data) {
                //这里获取到的data是js的对象数据
                let containerdiv = document.querySelector('.container');
                for (let msg of data) {
                    let newDivMsg = document.createElement('div');
                    newDivMsg.className = 'row message';
                    newDivMsg.innerHTML = msg.from + " 对 " + msg.to + " 说：" + msg.message;
                    containerdiv.appendChild(newDivMsg);
                }
            }
        });
    </script>
</body>

</html>